<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h2> {{ 'APP_SYSTEM_LOG' | translate }}</h2>
        <div class="action-head-pos">
            <div class="select filter-tag clr-select-wrapper" [hidden]="!isOpenFilterTag">
                <select id="selectKey" (change)="selectFilterKey($event)">
                    <option value="name">{{'APP_NAME'|translate}}</option>
                    <option value="operation">{{'APP_OPERATION'|translate}}</option>
                    <option value="operationInfo">{{'APP_OPERATION_INFO'|translate}}</option>
                </select>
            </div>
            <ko-filter [withDivider]="true" filterPlaceholder='{{"APP_LOG_FILTER" | translate}}' (filterEvt)="doFilter($event)"
                (openFlag)="openFilter($event)" [currentValue]="currentTerm"></ko-filter>
            <span (click)="refresh()" class="refresh-btn">
                <clr-icon shape="refresh" [hidden]="inProgress" ng-disabled="inProgress"></clr-icon>
                <span class="spinner spinner-inline" [hidden]="!inProgress"></span>
            </span>
        </div>
        <clr-datagrid style="word-break:break-all;overflow: hidden;" (clrDgRefresh)="load($event)" [clrDgLoading]="loading">
            <clr-dg-column>{{'APP_NAME'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_OPERATION'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_OPERATION_INFO'|translate}}</clr-dg-column>
            <clr-dg-column>{{'APP_CREATED_DATE'|translate}}</clr-dg-column>
        
            <clr-dg-row *ngFor="let item of items" [clrDgItem]="item">
                <clr-dg-cell>{{item.name}}</clr-dg-cell>
                <clr-dg-cell>
                    {{item.operation}}
                    <clr-signpost *ngIf="item.isExceed">
                        <clr-icon shape="ellipsis-horizontal" style="color:black;" size="12" class="tooltip tooltip-xs" clrSignpostTrigger></clr-icon>
                        <clr-signpost-content  style="max-width: 30rem;" *clrIfOpen>
                            <h3 style="margin-top: 0">{{'APP_OPERATION'|translate}}</h3>
                            <p>{{item.completeOperation}}</p>
                        </clr-signpost-content>
                    </clr-signpost>
                </clr-dg-cell>
                <clr-dg-cell>{{item.operationInfo}}</clr-dg-cell>
                <clr-dg-cell>{{item.createdAt |date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination #pagination [(clrDgPage)]="page" [clrDgPageSize]="size" [clrDgTotalItems]="total">
                    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
                    {{"APP_PAGER_TOTAL"|translate}} {{pagination.totalItems}} {{"APP_LOGGING"|translate}}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
</div>